<template lang="">
    <div>
        <div id="main"></div>
    </div>
</template>
<script>
    import * as echarts from 'echarts/core';
    export default {
        name: 'Charts',
        data() {
            return {
                option: {
                    xAxis: {
                        type: 'value',
                        minInterval: 1,
                    },
                    yAxis: {
                        type: 'category',
                        data: ['已发布', '未发布']
                    },
                    series: [
                        {
                            data: [0, 0],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        }
                    ]
                },
                myChart:''
            }
        },
        methods: {
            drawCharts() {
                var chartDom = document.getElementById('main');
                this.myChart = echarts.init(chartDom, 'dark');
                this.myChart.setOption(this.option,true);
                window.addEventListener("resize", this.resize);
            },
            resize(){
                this.myChart.resize();
            },
            emitServer() {
                axios({
                    method: 'GET',
                    url: `/QuestionList/countOnPub`,
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    console.log('Charts', result.data);
                    this.option.series[0].data[0] = result.data.conPublish1
                    this.option.series[0].data[1] = result.data.conPublish0
                    this.drawCharts()
                }).catch((err) => {
                    this.$message('拉取chart内容失败' + err.message)
                });
            }

        },
        mounted() {
            this.emitServer()
            this.$bus.$on('questionnaireHandled',()=>{
                this.emitServer()
            })
        },
        beforeDestroy() {
            window.removeEventListener('resize',this.resize)
        },
    }
</script>
<style scoped>
    #main {
        height: 300px;
        width: 100%;
    }
</style>